<template>
  <div class="scroll-bar">
    <el-carousel
      :initial-index="initialIndex"
      style="width: 100%" height="110px" arrow="always"
      :autoplay="false" trigger="click">
      <el-carousel-item v-for="(carousel, index) in carouselList" :key="'carousel'+index">
        <div class="day-container clearfix">
          <div
            @click="onSelect(scroll.realTime)"
            :key="'scroll'+index2"
            v-for="(scroll, index2) in carousel"
            :class="{'active': selectedDay===scroll.realTime}"
            class="day-content">
            <div class="day-box">
              <p class="date">{{scroll.realTime | formatDate('MM月DD日')}}{{scroll.weekDayName}}</p>
              <p class="count">{{scroll.times}}场直播</p>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'ScrollBar',
  data () {
    return {
      initialIndex: 0,
      selectedDay: '',
      scrollList: [],
      carouselList: [],
    }
  },
  mounted () {
    this.getScrollList()
  },
  methods: {
    onSelect (realTime) {
      this.selectedDay = realTime
      this.$emit('select', realTime)
    },
    getScrollList () {
      this.$http.get('/liveVideoController/getVideoDateList')
        .then(value => {
          // "realTime": "2020-04-01",
          // "liveTime": "04-01",
          // "weekDayName": "星期三",
          // "times": 1,
          // "select": 0
          this.scrollList = value
          const current = this.getCurrent(this.scrollList)
          const beforeList = this.scrollList.filter((value, index) => index < current.startIndex)
          const afterList = this.scrollList.filter((value, index) => index > current.endIndex)
          this.initialIndex = beforeList.length
          this.carouselList = [...this.splitList(beforeList), current.list, ...this.splitList(afterList)]
          this.onSelect(this.scrollList.find(value1 => value1.select === 1).realTime)
        })
    },
    getSelectIndex (list = []) {
      return list.findIndex(value => value.select === 1)
    },
    getCurrent (list = []) {
      let selectIndex = this.getSelectIndex(list)
      if (selectIndex < 3) {
        selectIndex = 3
      }
      const startIndex = selectIndex - 3
      const endIndex = selectIndex + 3
      return {
        startIndex,
        endIndex,
        list: list.filter((value, index) => index >= startIndex && index <= endIndex)
      }
    },
    splitList (list = []) {
      const result = []
      for (let i = 0, len = list.length; i < len; i += 7) {
        result.push(list.slice(i, i + 7))
      }
      return result
    }
  }
}
</script>

<style>
  .el-carousel__indicators--horizontal {
    display: none;
  }
</style>

<style scoped lang="less">
  .scroll-bar {
    margin-top: 20px;
    box-sizing: border-box;
    height: 110px;
    border: 1px solid #E4E5E7;

    .day-container {
      padding-left: 60px;
    }

    .day-content {
      cursor: pointer;
      float: left;
      position: relative;
      padding: 20px 10px;

      &.active {
        .day-box {
          background: #FF6B51;
        }

        .date {
          color: #FFFFFF;
        }

        .count {
          color: #FFFFFF;
        }

        &:before, &:after {
          content: ' ';
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          margin: 0 auto;
          left: 0;
          right: 0;
          border-right: 11px transparent solid;
          border-left: 11px transparent solid;
        }

        &:before {
          bottom: -2px;
          border-bottom: 10px #fff solid;
          z-index: 3;
        }

        &:after {
          bottom: 0;
          border-bottom: 10px #E4E5E7 solid;
        }
      }
    }

    .day-box {
      box-sizing: border-box;
      width: 162px;
      height: 68px;
      padding-top: 14px;
      border-radius: 4px;
      font-size: 14px;
      text-align: center;
      color: #FFFFFF;

      .date {
        color: #1F2329;
        margin-bottom: 4px;
      }

      .count {
        color: #9CA2A9;
      }
    }
  }
</style>
